import {Form, Row, Tooltip} from "@douyinfe/semi-ui";
import {useState} from "react";
import { useTranslation } from "react-i18next";

const DecryptForm = ({textTypeFields=[],
                       getSourceFiledId = (id:string)=>{},
                       getPassword = (password:string)=>{},
                       getDecryptType = (type:string)=>{},
                       getDecryptScope = (type:string)=>{},
                       getStartRow=(row: Number)=>{} })=> {
  const [encryptType, setEncryptType] = useState('symmetric');
  const [encryptScope, setEncryptScope] = useState('all');

  const { t } = useTranslation();


  const onFormChange = (e: any) => {
    const {encryptType, sourceFieldId, encryptScope, startRow, password} = e.values;
    setEncryptType(encryptType);
    setEncryptScope(encryptScope);
    getSourceFiledId(sourceFieldId);
    getStartRow(startRow);
    getPassword(password);
    getDecryptType(encryptType);
    getDecryptScope(encryptScope);
  };

  return (
    <Form
      style={{ padding: 10, width: '100%' }}
      onChange={onFormChange}
    >
      <Row>
        <Form.RadioGroup initValue={encryptType} field={'encryptType'} label={t("decrypt.type")}>
          <Form.Radio value={'symmetric'}>
            {t("encrypt.symmetric")}
          </Form.Radio>
          <Form.Radio value={'asymmetric'}>
            {t("encrypt.asymmetric")}
          </Form.Radio>
        </Form.RadioGroup>

        {
          encryptType === 'symmetric' &&
          <Form.Input style={{width:"90%"}} field={"password"} label={t("decrypt.password")}/>
        }

        <Form.Select
          field="sourceFieldId"
          style={{ width: '90%' }}
          label={t("encrypt.choose.sourceFieldId")}
          placeholder={t("encrypt.choose.placeHolder")}
        >
          {textTypeFields.map((field) => {
            return (
              <Form.Select.Option value={field.id} key={field.id}>{field.name}</Form.Select.Option>
            );
          })}
        </Form.Select>
        <Form.RadioGroup initValue={encryptScope} field={'encryptScope'} label={t("encrypt.scope")}>
          <Form.Radio value={'all'}>
            {t("encrypt.scope.all")}
          </Form.Radio>
          <Form.Radio value={'part'}>
            {t("encrypt.scope.part")}
          </Form.Radio>
        </Form.RadioGroup>
        {
          encryptScope === 'part' &&
          <Form.InputNumber maxLength={8} style={{width: '90%'}} field={'startRow'} label={t('encrypt.part.start')}/>
        }
      </Row>
    </Form>
  )
}

export default DecryptForm;
